<extend name="./common" />
<block name='content'>
  <link rel="stylesheet" href="__PUBLIC__/static/home/barrager/css/barrager.css"/>
  <div class="content-wrap"><!--内容-->
    <div class="content">

      <div class="content-block comment">
        <h2 class="title"><strong>留言</strong></h2>
        <form action="comment.php" method="post" class="form-inline" id="message-form">
          <div class="comment-title">
            <div class="form-group">
              <label for="commentName">昵称：</label>
              <input type="text" name="nickname" <if condition="F('webSet')['qqLogin'] eq 1"> readonly="readonly"</if> class="form-control" id="nickname" placeholder="张三" value="<?php echo session('visitor')['nickname'];?>">
            </div>
            <div class="form-group">
              <label for="commentEmail">邮箱：</label>
              <input type="text" name="email" class="form-control" id="email" placeholder="留下邮箱便于收到回复">
            </div>
          </div>
          <div class="comment-title">
            <div class="form-group">
              <label for="commentName">验证码：</label>
              <input type="text" name="nickname" placeholder="验证码" maxlength="4" class="form-control" id="code">
            </div>
            <div class="form-group">
              <img style="display: block;border: 1px solid #ccc;" src="__CONTROLLER__/verify" class="comment-form-text"  onclick="this.src='__CONTROLLER__/verify/'+Math.random()" id="verifyImg">
              <span style="    line-height: 37px;    margin-left: 10px;">点击图片切换</span>
            </div>
          </div>
          <div class="comment-form">
            <textarea placeholder="你的留言可以一针见血" name="message" id="message"></textarea>
            <div class="comment-form-footer">
        <if condition="F('webSet')['qqLogin'] eq 1">
              <div class="comment-form-text" style="display: block;">
              <if condition="empty(session('visitor'))">
              未登录？
              <a onclick='toQzoneLogin()'><img src="__PUBLIC__/static/home/images/qqlogin.png"></a>
              <else />
              已登录：<?php echo session('visitor')['nickname'];?> 
              <a href="{:U('index/logout')}">&nbsp;【退出登录】</a>
              </if>
               </div>
               </if>
              <div class="comment-form-btn">
                <button type="submit" class="btn btn-default btn-comment">提交评论</button>
              </div>
            </div>
          </div>
        </form>
        <span style="display: none" id="nextpage">2</span>
        <div class="content-block comment-content">
        <h2 class="title"><strong>最新留言</strong></h2>
          <ul class="messageul">
          <foreach name="messages" item='m'>
            <li class="messageli">
            <span class="face">
            <if condition="$m['to'] neq 0">
              <img src="__PUBLIC__/static/home/images/readerAvatar.png">
            <else />
              <if condition="F('webSet')['qqLogin'] eq 1">
                <if condition="!empty($m['avatar'])">
                  <img src="{$m['avatar']}">
                <else />
                  <img src="__PUBLIC__/static/home/images/avatars/{$m['to']%10}.jpg">
                </if>
              <else />
                <img src="__PUBLIC__/static/home/images/avatars/{$m['id']%10}.jpg">
              </if>
            </if>
            </span> 
            <span class="text">
            <if condition="$m['to'] neq 0">
            <strong style="font-weight:600">站长 &nbsp;&nbsp;回复&nbsp;&nbsp;{$m['replay']}</strong>
            <else />
            <strong style="font-weight:600">{$m['nickname']}</strong>
            </if>
            &nbsp;&nbsp;
            设备：{$m['systemos']}&nbsp;&nbsp;&nbsp;
            浏览器：{$m['browser']}&nbsp;&nbsp;&nbsp;
             ({$m['create_time']|date='Y-m-d H:i:s',###}) 说：<br />

            {$m['message']}
            <if condition="$m['to'] neq 0">
            <span class="text" style="border: 1px solid #efeae5">
            <span class="face">
              <if condition="F('webSet')['qqLogin'] eq 1">
                <if condition="!empty($m['replay_a'])">
                  <img src="{$m['replay_a']}">
                <else />
                  <img src="__PUBLIC__/static/home/images/avatars/{$m['to']%10}.jpg">
                </if>
              <else />
                  <img src="__PUBLIC__/static/home/images/avatars/{$m['to']%10}.jpg">
              </if>
            </span> 
            <strong style="font-weight:600">&nbsp;&nbsp;{$m['replay']} </strong>
            设备：{$m['replay_systemos']}&nbsp;&nbsp;&nbsp;
            浏览器：{$m['replay_browser']}&nbsp;&nbsp;&nbsp;
             ({$m['replay_create_time']|date='Y-m-d H:i:s',###}) 说：<br>
            {$m['replay_msg']}
              </span>
            </if>
              </span>
            </li>
            </foreach>
          </ul>
        </div>
      </div>
    </div>
  </div>
</block>

<block name='js'>
<script type="text/javascript" src="__PUBLIC__/static/home/barrager/jquery.barrager.min.js"></script>
<script>
  do{
    if({$jsonMessages}===null){
      break;
    }
    var looper_time=3*1000;
    var items={$jsonMessages};
    var total={$jsonMessages}.length;
    var run_once=true;
    var index=0;
    sss();
    function sss(){
      if(run_once){
          looper=setInterval(sss,looper_time);                
          run_once=false;
      }
      $('body').barrager(items[index]);
      index++;
      if(index == total){
          clearInterval(looper);
          return false;
      }
    }
  }while(false);
</script>
<script type="text/javascript">
function toQzoneLogin() {
   var _url='/index/qqlogin';  //转向网页的地址; 
   var name='TencentLogin';    //网页名称，可为空; 
   var iWidth=450; //弹出窗口的宽度; 
   var iHeight=320;   //弹出窗口的高度; 
   //获得窗口的垂直位置 
   var iTop = (window.screen.availHeight - 30 - iHeight) / 2; 
   //获得窗口的水平位置 
   var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; 
   window.open(_url, name, 'height=' + iHeight +
    ',innerHeight=' + iHeight + ',width=' + iWidth +
     ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + 
     ',status=1,toolbar=no,menubar=no,location=1,resizable=no,scrollbars=0,titlebar=no');
}
</script>
  <script type="text/javascript">
    $("#message-form").submit(function(){
      var nickname=$.trim($("#nickname").val());
      var email=$("#email").val();
      var message=$.trim($("#message").val());
      var code=$("#code").val();
      if(message==''){
        layer.alert('留言不能为空');
        return false; 
      }
      $.post('{:U("__ACTION__")}',{'nickname':nickname,'email':email,'message':message,'code':code},function(res){
        if(res.status){
          <if condition="F('webSet')['qqLogin'] eq 1">
            var avatar='<?php echo session("visitor")["figureurl_1"];?>';
          <else />
            var avatar='__PUBLIC__/static/home/images/avatars/'+parseInt(res.mid)%10+'.jpg';
          </if>
          var html='<li class="messageli"><span class="face"><img src="'+avatar+'"></span> <span class="text">';
          html+='<strong  style="font-weight:600">'+nickname+'</strong>&nbsp;&nbsp;';
          html+='设备：'+res.systemos+'&nbsp;&nbsp;&nbsp;浏览器：'+res.browser+'&nbsp;&nbsp;&nbsp;('+res.create_time+') 说：<br />'+message+'</span></li>';
          $(".messageul").prepend($(html).fadeIn(400));
          layer.msg('提交成功');
        }else{
          layer.alert(res.msg);
        }
      });
      return false;
    });


    //滚动条到页面底部加载更多案例 
    $(window).scroll(function(){
      var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
      var scrollHeight = $(document).height();   //当前页面的总高度
      var clientHeight = $(this).height();    //当前可视的页面高度
      if(scrollTop + clientHeight >= scrollHeight){ 
        /*翻页*/
        var page=$('#nextpage').text();
        next(page);
      }else if(scrollTop<=0){ 

      }
    });
    flag=true;
    function next (p){
      if (p > {$pageCount}){
          if(flag){
            var foot='<hr><h5 style="text-align:center;color:#aaa">已经到底了</h5>';
            $(".messageul").append($(foot).fadeIn(400));
            flag=false;
          }
          return false;
        }
      // layer.msg('请稍等，正在加载...');
      var _url = window.location+'?p='+p;
      if (p <= {$pageCount}){
          $('#nextpage').text(parseInt(p)+1);
        }
      jQuery.ajax({
        type : "POST",
        url : _url,
        success : function (data){
          result = jQuery(data).find(".comment-content .messageul .messageli");
          // 渐显新内容
          jQuery(function (){
            jQuery(".messageul").append(result.fadeIn(300));
          layer.closeAll();
          });
        }
      });
    }
  </script>
</block>